<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax请求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        <a href="javascript:void(0);" @click="testAjax">访问springmvc后台controller</a><br/>
        <a href="javascript:void(0);" @click="testAjaxPojo">访问springmvc后台controller，传递Json格式POJO</a><br/>
        <a href="javascript:void(0);" @click="testAjaxList">访问springmvc后台controller，传递Json格式List</a><br/>
        <a href="javascript:void(0);" @click="testAjaxReturnString">访问springmvc后台controller，返回字符串数据</a><br/>
        <a href="javascript:void(0);" @click="testAjaxReturnJson">访问springmvc后台controller，返回Json数据</a><br/>
        <a href="javascript:void(0);" @click="testAjaxReturnJsonList">访问springmvc后台controller，返回Json数组数据</a><br/>
        <br/>
        <a href="javascript:void(0);" @click="testCross">跨域访问</a><br/>
    </div>
</body>

<script>
    new Vue({
        el:"#app",
        data:{
            user:{name:"老李",age:20},
            userList:[
                {name:"老李",age:20},
                {name:"老王",age:21},
                {name:"老张",age:22}]
        },
        methods:{
            //访问springmvc后台controller
            testAjax(){
                axios.get("ajax/ajaxController").then(resp=>{})
            },
            //访问springmvc后台controller，传递Json格式POJO
            testAjaxPojo(){
                /*
                这里不能这样写;; 因为发送的不是json格式
                axios.get("ajax/ajaxPojoToController",{params:this.user}).then(resp=>{
                    console.log(resp);
                })*/
                axios.post("ajax/ajaxPojoToController",this.user).then(resp=>{
                    console.log(resp);
                })
            },
            //访问springmvc后台controller，传递Json格式List
            testAjaxList(){
                axios.post("ajax/ajaxListToController",this.userList).then(resp=>{
                    console.log(resp);
                })
            },
            //访问springmvc后台controller，返回字符串数据
            testAjaxReturnString(){
                axios.get("ajax/ajaxReturnString").then(resp=>{  //resp代表后台响应回来的数据
                    console.log(resp.data)
                })
            },
            //访问springmvc后台controller，返回Json对象数据
            testAjaxReturnJson(){

            },
            //访问springmvc后台controller，返回Json数组数据
            testAjaxReturnJsonList(){

            },
            //跨域访问
            testCross(){

            }
        }
    });

</script>
</html>